import { lazy } from "react";
import { RouteObject } from "react-router-dom";
import { useAuth } from "@/utils/auth";

const MainLayout = lazy(() => import("@/layout/main"));
const Login = lazy(() => import("@/pages/login"));
const PageNotFound = lazy(() => import("@/pages/404"));
const Home = lazy(() => import("@/pages/home"));
const Shopcart = lazy(() => import("@/pages/shopcart"));
const Order = lazy(() => import("@/pages/order"));
const Profile = lazy(() => import("@/pages/profile"));
const Community = lazy(() => import("@/pages/community"));

export type RouteItem = {
  title?: string;
  children?: RouteItem[];
  auth?: boolean;
} & RouteObject;

const routes: RouteItem[] = [
  {
    path: "/",
    Component: MainLayout,
    children: [
      {
        path: "/",
        Component: Home,
      },
      {
        path: "/shopcart",
        Component: Shopcart,
      },
      {
        path: "/order",
        Component: Order,
        loader: useAuth(),
      },
      {
        path: "/profile",
        Component: Profile,
        auth: true,
      },
      {
        path: "/community",
        Component: Community,
        auth: false,
      },
    ],
  },
  {
    path: "/login",
    Component: Login,
    auth: false,
  },
  {
    path: "*",
    auth: false,
    Component: PageNotFound,
  },
];

export default routes;
